<template>
	<view class="wrap-x bg-white ">
		<view class="wrap-y" style="width: 50vw;">
			<view class="title">属性设置区</view>
			<view class="wrap-x row margin-top-sm">
				<view class="label " style="font-weight: 550;">1.定位模式(position)</view>
			</view>
			<view style="margin: 30rpx;border: 1rpx solid #999;width: 45vw;" class="wrap-y">
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;background-color: #eee;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 5vw;border-right: 1rpx solid #999;">
						属性</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 40vw;">属性描述</view>
				</view>
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 5vw;border-right: 1rpx solid #999;">
						static</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 40vw;">默认值，无定位</view>
				</view>
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 5vw;border-right: 1rpx solid #999;">
						relative</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 40vw;">
						相对定位，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移</view>
				</view>
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 5vw;border-right: 1rpx solid #999;">
						absolute</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 40vw;">
						绝对定位，元素脱离文档流，不占据文档流的位置，相对于上一个设置了定
						位的父级元素来进行定位</view>
				</view>
				<view class="wrap-x">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 5vw;border-right: 1rpx solid #999;">
						fixed</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 40vw;">
						固定定位，元素脱离文档流，不占据文档流的位置，相对于浏览器窗口进行
						定位</view>
				</view>
			</view>

			<view class="wrap-x margin-top-sm">
				<view class="wrap-x row">
					<view class="label">橙色盒子定位模式position:</view>
					<uni-data-select :localdata="range" @change="changePosition1"
						style="width: 200px;"></uni-data-select>
				</view>
				<view class="wrap-x row">
					<view class="label">left:</view>
					<uni-number-box v-model="left1"></uni-number-box>
				</view>
				<view class="wrap-x row">
					<view class="label">right:</view>
					<uni-number-box v-model="right1"></uni-number-box>
				</view>
			</view>
			<view class="wrap-x margin-top-sm">
				<view class="wrap-x row">
					<view class="label">绿色盒子定位模式position:</view>
					<uni-data-select :localdata="range" @change="changePosition2"
						style="width: 200px;"></uni-data-select>
				</view>
				<view class="wrap-x row">
					<view class="label">left:</view>
					<uni-number-box v-model="left2"></uni-number-box>
				</view>
				<view class="wrap-x row">
					<view class="label">right:</view>
					<uni-number-box v-model="right2"></uni-number-box>
				</view>
			</view>
			<view class="wrap-x margin-top-sm">
				<view class="wrap-x row">
					<view class="label">蓝色盒子定位模式position:</view>
					<uni-data-select :localdata="range" @change="changePosition3"
						style="width: 200px;"></uni-data-select>
				</view>
				<view class="wrap-x row">
					<view class="label">left:</view>
					<uni-number-box v-model="left3"></uni-number-box>
				</view>
				<view class="wrap-x row">
					<view class="label">right:</view>
					<uni-number-box v-model="right3"></uni-number-box>
				</view>
			</view>
			<view class="wrap-x row margin-top-sm">
				<view class="label " style="font-weight: 550;">2.层叠顺序(z-index)</view>
			</view>
			<view class="wrap-x margin-top-sm">
				<view class="wrap-x row">
					<view class="label">橙色盒子z-index:</view>
					<uni-number-box v-model="z_index1"></uni-number-box>
				</view>
				<view class="wrap-x row">
					<view class="label">绿色盒子z-index:</view>
					<uni-number-box v-model="z_index2"></uni-number-box>
				</view>
				<view class="wrap-x row">
					<view class="label">蓝色盒子z-index:</view>
					<uni-number-box v-model="z_index3"></uni-number-box>
				</view>
			</view>
			<view class="wrap-x row margin-top-sm">
				<view class="label " style="font-weight: 550;">3.溢出隐藏(overflow)</view>
			</view>
			<view class="wrap-x margin-top-sm">
				<view class="wrap-x row">
					<view class="label">粉色盒子overflow:</view>
					<uni-data-select v-model="overflow" :localdata="range1" @change="changeOverflow"
						style="width: 200px;"></uni-data-select>
				</view>
				<view class="wrap-x row">
					<view class="label">橙色盒子width:</view>
					<uni-number-box v-model="width1"></uni-number-box>
				</view>
			</view>
		</view>

		<view class="wrap-y" style="width:50vw;">
			<view class="title">布局效果预览区</view>
			<view style="width: 90%;height: 750px;background-color:#eee ;margin: 20rpx;display: flex;"
				:style="{overflow:overflow}">
				<view :style="{width:width1+'px',height:height+'px',background: bgColor,
				margin:margin+'px',padding:padding+'px',border:border+'px solid red',borderRadius:border_radiu+'px',
				boxShadow:box_shadow4 +' '+box_shadow1+'px '+box_shadow2+'px '+box_shadow3+'px '+box_shadow5+'px ',
				position:position1,zIndex:z_index1,left:left1+'px',top:top+'px',right:right1+'px',bottom:bottom+'px'}">
				</view>
				<view :style="{width:width+'px',height:height+'px',background: bgColor1,
				margin:margin+'px',padding:padding+'px',border:border+'px solid red',borderRadius:border_radiu+'px',
				boxShadow:box_shadow4 +' '+box_shadow1+'px '+box_shadow2+'px '+box_shadow3+'px '+box_shadow5+'px ',
				position:position2,zIndex:z_index2,left:left2+'px',top:top+'px',right:right2+'px',bottom:bottom+'px'}">
				</view>


				<view :style="{width:width+'px',height:height+'px',background: bgColor2,
				margin:margin+'px',padding:padding+'px',border:border+'px solid red',borderRadius:border_radiu+'px',
				boxShadow:box_shadow4 +' '+box_shadow1+'px '+box_shadow2+'px '+box_shadow3+'px '+box_shadow5+'px ',
				position:position3,zIndex:z_index3,left:left3+'px',top:top+'px',right:right3+'px',bottom:bottom+'px'}">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'project',
		props: {},
		data() {
			return {
				range: [{
						value: 0,
						text: "static"
					},
					{
						value: 1,
						text: "absolute"
					},
					{
						value: 2,
						text: "fixed"
					},
					{
						value: 3,
						text: "relative"
					}
				],
				range1: [{
						value: 0,
						text: "overflow"
					},
					{
						value: 1,
						text: "auto"
					},
					{
						value: 2,
						text: "hidden"
					},
					{
						value: 3,
						text: "scroll"
					}
				],
				position: 'static',
				position1: 'static',
				position2: 'static',
				position3: 'static',
				overflow: 'visible',
				zindex: 0,
				bgColor: '#ff8c53',
				bgColor1: '#34daaa',
				bgColor2: '#55aaff',
				borderColor: '#ff5500',
				width: 200,
				height: 200,
				width1: 200,
				margin: 0,
				padding: 0,
				border: 0,
				border_radiu: 0,
				box_shadow1: 0,
				box_shadow2: 0,
				box_shadow3: 0,
				box_shadow4: '#000000',
				box_shadow5: 0,
				right: 0,
				left: 0,
				right1: 0,
				left1: 0,
				right2: 0,
				left2: 0,
				right3: 0,
				left3: 0,
				bottom: 0,
				top: 0,
				z_index1: 0,
				z_index2: 0,
				z_index3: 0
			}
		},
		methods: {
			changePosition(value) {
				this.position = value.detail.value;
			},
			changePosition1(value) {
				this.position1 = this.range[value].text;
			},
			changePosition2(value) {
				this.position2 = this.range[value].text;
			},
			changePosition3(value) {
				this.position3 = this.range[value].text;
			},
			changeOverflow(value) {
				this.overflow = this.range1[value].text;
			}
		}
	}
</script>

<style lang="scss">
	radio {
		margin-left: 20px;
	}

	.title {
		font-weight: 600;
		color: red;
		font-size: 40rpx;
		text-align: center;
	}

	.row {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 30rpx;

		.label {
			font-size: 30rpx;
			color: black;
			margin-right: 20rpx;
		}

		.input {
			font-size: 30rpx;
			color: black;
			width: 80px;
			border: 1rpx solid #eee;
			padding: 8rpx 10rpx;
		}
	}
</style>